<template>
    <div class="import-modal-wrapper">
        <el-dialog :model-value="props.value" :title="dialog.title" :width="dialog.width" destroy-on-close>
            <ul class="import-modal-box">
                <li>
                    <el-form ref="ruleFormRef" :model="formData" :rules="ruleForm">
                        <el-form-item label="产品" prop="productNo">
                            <el-select placeholder="请选择产品" v-model="formData.productNo" filterable>
                                <el-option
                                    v-for="item in productList"
                                    :label="item.productName"
                                    :key="item.productNo"
                                    :value="item.productNo"
                                />
                            </el-select>
                        </el-form-item>
                    </el-form>
                </li>
                <li>
                    <span>请使用系统提供的模版导入设备：</span>
                    <el-button link type="primary" @click="onDownload"> 下载模板 </el-button>
                    <el-upload :auto-upload="false" style="display: flex" v-if="formData.productNo">
                        <!-- TODO: 上传 -->
                        <el-button link type="primary"> 上传 </el-button>
                    </el-upload>
                    <el-button link type="primary" v-else @click="submitForm"> 上传 </el-button>
                </li>
            </ul>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="closeDialog">关闭</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus';
import { IoTProductService } from '@great/services';
import type { IotDevice } from '@great/services';
import { reactive } from 'vue';
import type { PopupBoxProps } from '@great/utils';

interface IProps extends PopupBoxProps {
    callBack?: () => Promise<void>;
}
const props = defineProps<IProps>();

interface Dialog {
    title: string;
    width: number;
    detail?: Record<string, any>;
}
const dialog = reactive<Dialog>({
    title: '导入',
    width: 600,
    detail: undefined
});

const formData = reactive<IotDevice>({
    productNo: ''
});
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<FormRules<IotDevice>>({
    productNo: [{ required: true, message: '请选择产品', trigger: ['blur', 'change'] }]
});
const productList = ref<Array<Record<string, string>>>([]);
// 获取产品列表
const getProductList = async () => {
    const res = await IoTProductService.getProductEnableList();
    productList.value = res.data;
};
// 表单提交
const submitForm = () => {
    ruleFormRef.value?.validate();
};
// TODO: 下载
const onDownload = () => {
    //
};
//关闭弹框
const closeDialog = () => {
    props.close();
    props.callBack?.();
};

const init = () => {
    getProductList();
};
init();
</script>
<style scoped lang="scss">
.import-modal-wrapper {
    .import-modal-box {
        li {
            list-style: none;
            line-height: 40px;
            display: flex;
        }
    }
}
</style>
